<template>
<div>
  <!--表格-->
  <el-table
    :data="account_list.list"
    tooltip-effect="dark"
    style="width: 100%"
   >
    <el-table-column
      prop="account"
      label="账号"
      width="120">
    </el-table-column>

    <el-table-column
      prop="username"
      label="用户名"
      show-overflow-tooltip>
    </el-table-column>

    <el-table-column
      prop="dept"
      label="部门"
      width="500px"
      show-overflow-tooltip
    >
    </el-table-column>

    <el-table-column
      prop="position"
      label="职务"
      width="500px"
      show-overflow-tooltip
    >
    </el-table-column>

    <el-table-column
      prop="status"
      label="状态"
      show-overflow-tooltip>
    </el-table-column>

    <el-table-column label="档案状态">
      <template slot-scope="scope">
        <el-button size="mini" @click="recordDetail(scope.row)">查看</el-button>
      </template>
    </el-table-column>

    <!--操作-->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="recordDetail(scope.row)">个人档案</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="userinfo" ref="userinfo" label-width="80px">
      <el-form-item label="姓名" prop="username"><el-input v-model="userinfo.username" placeholder="输入姓名" class="w300"></el-input></el-form-item>
      <el-form-item label="账号" prop="account"><el-input  v-model="userinfo.account" placeholder="输入账号" class="w300"></el-input></el-form-item>
      <el-form-item label="密码" prop="password"><el-input v-model="userinfo.password" placeholder="输入密码" class="w300" show-password></el-input></el-form-item>
      <el-form-item label="确认密码" prop="repeatPassword"><el-input v-model="userinfo.repeatPassword" placeholder="输入确认密码" class="w300" show-password></el-input></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editUserinfo">立即修改</el-button>
        <el-button type="info" @click="cancelForm">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</div>

</template>

<script>
  import {mapState} from "vuex"
  import {editStaffMsg,delSatff} from "@/apilist/Personnel";

  export default {
        name: "manageStaff",
        data(){
            return {
                dialogFormVisible: false,
                title: '用户信息',
                userinfo: {
                    account: '',
                    username: '',
                    password: '',
                    repeatPassword: '',
                    uid: '',
                },
            }
        },
        computed: {
            ...mapState("SetUser",["account_list"]),
            ...mapState("Common",["common"]),
        },
        methods: {
            handleEdit(uid,user){
              this.title = user.username
              this.userinfo.account = user.account
              this.userinfo.username = user.username
              this.userinfo.uid = user.id
              this.dialogFormVisible = true
            },

            handleDelete(uid,user){
                this.$confirm('此操作将永久删除'+user.username+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delSatff({uid: user.id}).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            recordDetail(user){
                console.log('------------detail')
                this.$emit('changeTab',user.id)
            },
            editUserinfo(){
                editStaffMsg(this.userinfo).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        onClose: ()=>{
                            this.cancelForm()
                        }
                    })
                })
            },
            cancelForm(){
                this.$refs['userinfo'].resetFields()
                this.dialogFormVisible = false
            },


        },
    }
</script>

<style scoped>

</style>
